<template>
  <div class="pay-order">
    <el-card>
      <div class="pay-title">预约挂号支付</div>
      <div class="order-info">
        <div class="info-item"><b>订单号：</b>{{ order.orderNo }}</div>
        <div class="info-item"><b>预约人：</b>{{ order.userName }}</div>
        <div class="info-item"><b>预约时间：</b>{{ order.date }} {{ order.time }}</div>
        <div class="info-item"><b>科室：</b>{{ order.department }}</div>
        <div class="info-item"><b>医生：</b>{{ order.doctor }}</div>
        <div class="info-item"><b>价格：</b><span class="price">¥{{ order.price }}</span></div>
      </div>
      <div class="pay-methods">
        <div class="pay-method-title">请选择支付方式：</div>
        <el-radio-group v-model="payType">
          <el-radio value="alipay">支付宝</el-radio>
          <el-radio value="wechat">微信</el-radio>
          <el-radio value="medicare">医保</el-radio>
        </el-radio-group>
      </div>
      <div class="qrcode-area" v-if="payType">
        <div class="qrcode-title">请使用{{ payTypeName }}扫码支付</div>
        <n-qr-code :value="qrcodeContent" :size="160" />
      </div>
      <div class="pay-btns">
        <el-button type="primary" size="large" @click="payOrder">立即支付</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { NQrCode } from 'naive-ui'
const route = useRoute()
const router = useRouter()
// 获取订单信息（从路由query或state）
const order = ref({
  orderNo: route.query.orderNo || 'AXYY' + Date.now(),
  userName: route.query.userName || '张三',
  date: route.query.date || '2025-06-12',
  time: route.query.time || '08:30-09:00',
  department: route.query.department || '心血管内科',
  doctor: route.query.doctor || '李明',
  price: route.query.price || 50
})
const payType = ref('alipay')
const payTypeName = computed(() => {
  if (payType.value === 'alipay') return '支付宝';
  if (payType.value === 'wechat') return '微信';
  if (payType.value === 'medicare') return '医保';
  return '';
})
const qrcodeContent = computed(() => {
  return `订单号:${order.value.orderNo},支付方式:${payTypeName.value}`
})
const payOrder = () => {
  ElMessage.success('支付成功！')
  // 将预约信息存储到本地
  const appointmentInfo = {
    orderNo: order.value.orderNo,
    userName: order.value.userName,
    date: order.value.date,
    time: order.value.time,
    department: order.value.department,
    doctor: order.value.doctor,
    price: order.value.price,
    status: '已支付'
  }
  // 获取现有预约单数据
  const existingAppointments = JSON.parse(localStorage.getItem('appointments') || '[]')
  // 添加新预约信息
  existingAppointments.push(appointmentInfo)
  // 更新本地存储
  localStorage.setItem('appointments', JSON.stringify(existingAppointments))
  setTimeout(() => {
    router.push('/appointments')
  }, 1000)
}
</script>
<style scoped>
.pay-order {
  max-width: 500px;
  margin: 40px auto;
}
.pay-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1976d2;
  margin-bottom: 24px;
  text-align: center;
  letter-spacing: 2px;
}
.order-info {
  margin-bottom: 28px;
}
.info-item {
  margin-bottom: 10px;
  font-size: 1.08rem;
}
.price {
  color: #e53935;
  font-weight: 700;
  font-size: 1.15rem;
}
.pay-methods {
  margin-bottom: 28px;
}
.pay-method-title {
  font-weight: 600;
  margin-bottom: 10px;
}
.qrcode-area {
  margin: 24px 0 28px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode-title {
  font-size: 1.08rem;
  color: #1976d2;
  margin-bottom: 10px;
}
.pay-btns {
  display: flex;
  justify-content: center;
}
</style> 